<template>
	<view class="callFriend">
		<view class="status-contents">
			<view class="status top-view" :style="[{height:statusBar+ 'px'}]" :class="[backTopShow?'hasBg':'']"></view>
			<view class="title" style="height: 88rpx;" :style="[{top:statusBar+ 'px'}]" :class="[backTopShow?'hasBg':'']">
				<view class="back-box" @click="back()">
					<image src="/static/images/backwhite.png" class="back" mode=""></image>
					<view class="title-text" v-if="backTopShow">{{ title_text }}</view>
				</view>
			</view>
		</view>
		<view class="status-relative-fixed" :class="[backTopShow?'hasBg':'']">
			<view class="status-relative" :style="[{height:statusBar+ 'px',top:statusBar+ 'px'}]"></view>
			<view style="height: 88rpx;width: 750rpx;" ></view>
		</view>
		<view class="call-friend-banner">
			<view class="activity-details-btn" @click="showmsg()"></view>
			<image src="/static/images/calledFriendbanner.png" class="calledFriendbanner" mode="widthFix" ></image>
			<!-- <view class="broadcast" v-if="samples.length>0">
				<swiper class="swiper" vertical="true" autoplay="true" interval="2000" circular="true">
						<swiper-item v-for="(item,index) in samples" :key="index" v-if="samples.length>0">
								<view class="swiper-item">
									<image :src="item.user.avatar_url" class="broadcasticon" mode=""></image>
									<view>恭喜{{ item.user.name }}领取红包{{ item.money }}元</view>
								</view>
						</swiper-item>
				</swiper>
			</view> -->
			<image src="/static/images/calledbtn.png" class="calledbtn" @click="recruit" mode=""></image>
		</view>

		<view>
			<image src="/static/images/rankingListbg.png" class="rankingListbg" mode=""></image>
		</view>
		<view class="my-ranking">
			<view class="my-ranking-title">
				<image src="/static/images/leftline.png" mode=""></image>
				<view>我的排行</view>
				<image src="/static/images/rightline.png" mode=""></image>
			</view>
			<view class="my-ranking-info">
				<view class="my-ranking-info-left">
					<view class="my-ranking-info-num">
						<view v-if="mine==0" class="no-rank">
							<view>暂未</view>
							<view>上榜</view>
						</view>
						<view v-else>{{ mine }}</view>
					</view>
					<view class="my-ranking-user-info">
						<image  v-if="user" :src="user.avatar_url" class="user-img" mode=""></image>
						<view v-if="user">{{ user.name }}</view>
					</view>
				</view>
				<view class="my-ranking-info-right" v-if="tabIndex==0&&user">{{ user.dividend_all }}</view>
				<view class="my-ranking-info-right" v-if="tabIndex==1&&user">{{ user.dividend_day }}</view>
			</view>
		</view>
		<view class="rank-list">
			<view class="rank-list-tab">
				
				<view @click="listTab(1)">
					<image src="/static/images/tablefted.png" v-if="tabIndex==1" mode=""></image>
					<image src="/static/images/tabLeft.png" v-else mode=""></image>
					<view class="tabTitle" :class="[tabIndex==1?'active':'']">今日排行</view>
					<view class="active-line" v-if="tabIndex==1"></view>
				</view>
				<view @click="listTab(0)">
					<image src="/static/images/tabRight.png" v-if="tabIndex==0" mode=""></image>
					<image src="/static/images/tabrighted.png" v-else mode=""></image>
					
					<view class="tabTitle" :class="[tabIndex==0?'active':'']">累计排行</view>
					<view class="active-line" v-if="tabIndex==0"></view>
				</view>
				<view class="tabbg"></view>	
			</view>
			<view class="rank-list-content">
				<view></view>
				<view class="rank-list-item" v-for="(item,index) in pageItems" :key="index" v-if="tabIndex==0">
					<view class="rank-list-item-left">
						<view class="rank-list-item-num">
							<image src="/static/images/rank1.png" v-if="index==0" class="rank-icon" mode=""></image>
							<image src="/static/images/rank2.png" v-else-if="index==1" class="rank-icon" mode=""></image>
							<image src="/static/images/rank3.png" v-else-if="index==2" class="rank-icon" mode=""></image>
							<view v-else>{{ index+1 }}</view>
						</view>
						<view>
							<image :src="item.avatar_url" v-if="item.avatar_url" mode="" class="rank-list-user-img"></image>
							<image src="/static/images/logo.png" mode="" v-else class="rank-list-user-img"></image>
						</view>
						<view class="rank-list-item-user">
							<view class="badge-lable" v-if="item.grade=='vip'&&(item.is_gold_master==1 || item.is_gold_master==true)" >
								<image src="/static/images/golder-grade-icon-vip3.png"  class="badge-gvip-icon" mode="heightFix" ></image>
							</view>
							<view class="rank-list-item-user-name rank-list-item-user-name1">{{ item.name }}</view>
						</view>
					</view>
					<!-- <view class="rank-list-item-money" v-if="index<3">{{ item.dividend_all }}</view>
					<view class="rank-list-item-money rank-list-item-money-normal" v-else>{{ item.dividend_all }}</view> -->
				</view>
				<view class="rank-list-item" v-for="(item,index) in pageItems" :key="index" v-if="tabIndex==1&&pageItems.length>0">
					<view class="rank-list-item-left">
						<view class="rank-list-item-num">
							<image src="/static/images/rank1.png" v-if="index==0" class="rank-icon" mode=""></image>
							<image src="/static/images/rank2.png" v-else-if="index==1" class="rank-icon" mode=""></image>
							<image src="/static/images/rank3.png" v-else-if="index==2" class="rank-icon" mode=""></image>
							<view v-else>{{ index+1 }}</view>
						</view>
						<view>
							<image :src="item.avatar_url" mode="" v-if="item.avatar_url" class="rank-list-user-img"></image>
							<image src="/static/images/logo.png" mode="" v-else class="rank-list-user-img"></image>
						</view>
						<view class="rank-list-item-user">
							<!-- <view>掌柜</view> -->
							<view class="rank-list-item-user">
								<view class="badge-lable" v-if="item.grade=='vip'&&(item.is_gold_master==1 || item.is_gold_master==true)" >
									<image src="/static/images/golder-grade-icon-vip3.png"  class="badge-gvip-icon" mode="heightFix" ></image>
								</view>
								<view class="rank-list-item-user-name">{{ item.name }}</view>
							</view>
						</view>
					</view>
					<view class="rank-list-item-money" v-if="index<3">{{ item.dividend_day }}</view>
					<view class="rank-list-item-money rank-list-item-money-normal" v-else>{{ item.dividend_day }}</view>
				</view>
				<view class="no-more" v-if="pageHasNoMore">
					--- 没有更多数据了 ---
				</view>
			</view>
		</view>
		<view class="msg-pop">
			 <uni-popup ref="msgpopup" type="center">
				 <view class="popbgmsg-box" @click="close()">
					 <image src="/static/images/activitypopbg.png" class="activitypopbg" mode=""></image>
					 <view class="pop-content">
						 <view class="pop-content-item-title">1、活动时间：</view>
						 <view class="pop-content-item-content">即日起至2022年12月31日</view>
						 <view class="pop-content-item-title">2、活动内容：</view>
						 <view class="activity-content">
							 <!-- <view class="pop-content-item-content pop-content-item-content1">5万大奖 人人可得</view> -->
							 <view class="pop-content-item-content"><text class="rank-lable">冠军奖<text></text></text>：全新保时捷718一辆</view>
							 <view class="pop-content-item-content"><text class="rank-lable">亚军奖<text></text></text>：全新宝马320i一辆</view>
							 <view class="pop-content-item-content"><text class="rank-lable">季军奖<text></text></text>：全新奔驰A180L一辆</view>
							 <view class="pop-content-item-content"><text class="rank-lable">4～10名<text></text></text>：每人50g金砖一块</view>
							 <!-- <view class="pop-content-item-content"><text class="rank-lable">第11-50名<text></text></text>：奖金300元</view>
							 <view class="pop-content-item-content"><text class="rank-lable">第51-100名<text></text></text>：奖金200元</view>
							 <view class="pop-content-item-content"><text class="rank-lable">第101-200名<text></text></text>：奖金100元</view>
							 <view class="pop-content-item-content"><text class="rank-lable">第201-300名<text></text></text>：奖金50元</view> -->
						 </view>
						 <view class="pop-content-item-title">3、奖金发放</view>
						 <view class="pop-content-item-content">本次活动真实有效，官方将提前与满足入围条件的伙伴取得联系，并按照活动规则发放奖励。</view>
					 </view>
					 <image src="/static/images/conformbtn.png" class="conformbtn" mode="" @click="close()"></image>
				 </view>
			 </uni-popup>
		</view>
		<view class="promote">
			<uni-popup ref="posterspopup" type="center">
				<view class="posters">
					<!-- <swiper class="poster-swiper" :indicator-dots="true" :autoplay="false" :circular="true"
						@change="onPosterChange" current="1">
						<swiper-item v-for="(poster, index) in posters" :key="index" class="poster-swiper-item">
							<view class="poster-item">
								<img class="img"  :src="poster.mini_user_invite_poster"/>
							</view>
						</swiper-item>
					</swiper> -->
					<view class="vip-rotation">
						<!-- <swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="false" :circular="true"
						 :autoplay="false" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
						 indicator-active-color="#0081ff">
							<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
								<view class="swiper-item">
									<img :src="item.mini_user_invite_poster" class="poster-img" >
								</view>
							</swiper-item>
						</swiper> -->
						<img class="image"  :src="wapInviterPoster" />
					</view>
					<view class="save" @click="saveInvitePoster">长按图片保存海报</view>
				</view>
			</uni-popup>
			<uni-popup ref="recruitpopup" type="bottom">
				<view class="popup">
					<view class="share">
						<!-- <button class="wechat" open-type="share" :plain="true">
							<image class="pic" mode="aspectFit" src="/static/images/wechat.png">
							</image>
							<view class="share-text">
								<view class="large">分享小程序</view>
								<view class="small">（可锁粉）</view>
							</view>
						</button> -->
						<button class="img" :plain="true" @click="choosePoster">
							<image class="pic" mode="aspectFit" src="/static/images/saveimg.png">
							</image>
							<view class="share-text">
								<view class="large">生成海报</view>
								<view class="small">（可锁粉）</view>
							</view>
						</button>
						<button class="img" :plain="true" @click="copyLink">
							<image class="pic" mode="aspectFit" src="/static/images/copylink.png">
							</image>
							<view class="share-text">
								<view class="large">复制链接</view>
								<view class="small">(可锁粉)</view>
							</view>
						</button>
					</view>
					<view class="cancel" @click="cancelRecruit">取消</view>
				</view>
			</uni-popup>
		</view>
		<view class="backTop" @click="returnTop()" v-if="backTopShow">
			<image src="/static/images/backTop.png"  mode=""></image>
		</view>
		<!-- <down-load-app-com :top="400"></down-load-app-com> -->
		
		<!-- <view class="tips">--此网页由<text style="margin:0 10rpx">shopwap.littleshop.shop</text>提供--</view> -->
	</view>
</template>

<script>
	import store from "store"
	import { mapGetters,mapMutations,mapActions } from 'vuex'
	import { getAllRankList,getTodayRankList } from "api/rankListApi.js"
	import { getPosters,getPoster,getWapInviterPoster } from "api/posterApi"
	import { getPendingBonusSamples,checkMyPendingBonus,bonusCheckingBeforeTaking } from "api/pendingBonusApi"
	import { getUser } from "api/userApi"
	// import AuthChecking from "mixins/AuthChecking"
	// import CurrentUser from "mixins/CurrentUser"
	import Base64 from 'base-64';
	export default {
		store,
		computed: {
			...mapGetters([
				'user',
				'isLogin',
				'statusBar'
			])
		},
		mixins: [
			// AuthChecking,
			// CurrentUser
		],
		data() {
			return {
				tabIndex: 1,
				rankList: [1, 2, 3, , 4],
				pageNumber: 1,
				pageMeta: {},
				pageItems: [],
				pageHasNoMore: false,
				posters: [],
				currentPosterIndex: 0,
				samples:[],
				mine:0,
				todayBonus:'0.00',
				canLoad:false,
				backTopShow:false,
				title_text:'今日排行',
				// statusBar:0,
				
				cardCur: 0,
				dotStyle: false,
				towerStart: 0,
				direction: '',
				swiperList: [
					{
						id: 0,
						type: 'image',
						url: '/static/images/vipbg.png',
					},
					{
						id: 1,
						type: 'image',
						url: '/static/images/svipbg.png'
					}, 
					{
						id: 0,
						type: 'image',
						url: '/static/images/vipbg.png',
					},
					{
						id: 1,
						type: 'image',
						url: '/static/images/svipbg.png'
					}
				],
				wapInviterPoster:'',
				initIndex:0
			}
		},
		methods: {
			...mapMutations([
				'setUser',
			]),
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},
					
			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},
					
			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},
					
			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},
			close(){
				this.$refs.msgpopup.close()
			},
			showmsg(){
				this.$refs.msgpopup.open('center')
			},
			async getUser(){
				let response =  await getUser()
				this.setUser(response)
			},
			async loadBonusSamples() {
				const response = await getPendingBonusSamples({ include: 'user'})
				this.samples = response.data
			},
			async bonusCheckingBeforeTaking(){
				uni.showLoading({title: '加载中'})
				setTimeout(()=>{
					uni.hideLoading()
				},800)
				let response = await bonusCheckingBeforeTaking()
				if(Object.keys(response).length > 0){
					if(response.today){
						this.todayBonus = response.today.money
					}else{
						this.todayBonus = '0.00'
					}
					
				}else{
					this.todayBonus = '0.00'
				}
				
			},
			async checkMyPendingBonus(){
				const response = await checkMyPendingBonus()
				if(response){
					if(Object.keys(response).length>0){
						this.todayBonus = response.total_money
					}else{
						this.todayBonus = '0.00'
					}
				}
			},
			async loadPageItems() {
				if (this.tabIndex == 0) {
					// return await getAllRankList({page: this.pageNumber})
					return await getAllRankList({index: this.initIndex})
				} else {
					// return await getTodayRankList({
					// 	page: this.pageNumber
					// })
					return await getTodayRankList({
						index: this.initIndex
					})
				}
			},
			async loadPageData() {
				this.canLoad = false 
				uni.showLoading({title: '加载中'})
				setTimeout(()=>{
					uni.hideLoading()
				},800)
				const response = await this.loadPageItems()
				if (response) {
					this.mine = response.mine
					if(this.tabIndex == 0){
						if(response.all.length>0){
							if (this.initIndex === 0) {
							    this.pageItems = response.all.slice(0,100)
							} else {
							    this.pageItems = [...this.pageItems, ...response.all].slice(0,100)
							}
							this.initIndex = this.pageItems.length - 1;
							if(this.initIndex == 0){
								this.pageHasNoMore = true
							}
						}else{
							this.pageHasNoMore = true
						}
					}else{
						if(response.day.length>0){
							if (this.initIndex === 0) {
							    this.pageItems = response.day.slice(0,100)
							} else {
							    this.pageItems = [...this.pageItems, ...response.day].slice(0,100)
							}
							this.initIndex = this.pageItems.length - 1;
							if(this.initIndex == 0){
								this.pageHasNoMore = true
							}
						}else{
							this.pageHasNoMore = true
						}
					}
					
					// if (this.pageNumber == 1) {
					// 	if (this.tabIndex == 0) {
							
					// 		this.pageItems = response.all.data.slice(0,100)
					// 	} else {
					// 		this.pageItems = response.today.data.slice(0,100)
					// 	}
					// } else {
					// 	if (this.tabIndex == 0) {
					// 		this.pageItems = [...this.pageItems, ...response.all.data].slice(0,100)
					// 	} else {
					// 		this.pageItems = [...this.pageItems, ...response.today.data].slice(0,100)
					// 	}
					// }
					
					// let meta = {}
					// if (this.tabIndex == 0) {
					// 	meta = response.all
					// } else {
					// 	meta = response.today
					// }
					// if(meta.total == 0){
					// 	this.pageHasNoMore = true
					// }

					// this.pageMeta = meta
					// if (meta.current_page === meta.last_page) {
					// 	this.pageHasNoMore = true
					// }
										
					this.canLoad = true
				}
			},
			async loadAndMakePosters() {
				const response = await getPosters()
				const posters = response.data
				if (posters.length > 0) {
					for (let i = 0; i < posters.length; i++) {
						const poster = await getPoster(posters[i].id)
						this.posters.push(poster)
					}
					let list = this.posters
					this.posters = [...list, ...list]
					this.swiperList = this.posters
				}
			},
			onPosterChange(e) {
				this.currentPosterIndex = e.detail.current
			},
			saveInvitePoster() {
				let that = this
				const currentPoster = this.posters[this.currentPosterIndex]
				const path = currentPoster.mini_user_invite_poster
				uni.getImageInfo({
					src: path,
					success: function(image) {
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success(res) {
								uni.showToast({
									title: '海报已保存至相册',
									duration: 2000
								})
								that.$refs.posterspopup.close()
							},
							fail(err) {
								uni.showModal({
									title: '提示',
									content: '由于您拒绝保存权限，无法保存图片，下次请前往设置开启权限',
									showCancel: false
								})
							}
						})
					}
				})
			},
			choosePoster() {
				this.$refs.recruitpopup.close()
				this.$refs.posterspopup.open('center')
			},
			getWapInviterPoster(){
				getWapInviterPoster().then(res=>{
					this.wapInviterPoster = res.user_invite_poster
				})
			},
			recruit() {
				if(this.statusBar>0){
					openShare.postMessage('share');
				}else{
					this.cardCur = 0
					this.TowerSwiper('swiperList');
					this.$refs.recruitpopup.open('bottom')
				}
			},
			cancelRecruit() {
				this.$refs.recruitpopup.close()
			},
			back() {
				uni.navigateBack({})
			},
			listTab(index) {
				this.tabIndex = index
				this.initIndex = 0
				this.pageNumber = 1
				this.pageItems = []
				this.pageHasNoMore = false
				this.canLoad = true
				if(index==0){
					this.title_text = '累计排行'
				}else{
					this.title_text = '今日排行'
				}
				this.loadPageData()
			},
			returnTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				})
			},
			copyLink(){
				let invite_code = null; 
				let query = {};
				if(this.user){
					invite_code = this.user.invite_code
				}
				if(invite_code){
					query = {
						inviter_code:invite_code,
						is_share:true
					}
				}else{
					query = {
						is_share:true
					}
				}
				
				let baseQuery = Base64.encode(JSON.stringify(query)) 
				let copyUrl = '【风速秒】' +  window.location.origin + '/#/packs/pages/auth/auth?query=' + baseQuery + '「邀你来逛风速秒App，全网超底价，购物超便宜」点击链接直接打开';
				uni.setClipboardData({
				    data: copyUrl,
				    success: function () {
							uni.showModal({
								content:'已复制到剪切板!去分享给好友！',
								showCancel: false,
								confirmText:'去分享'
							})
				    }
				})
			}
		},
		async onShow() {			
			this.pageNumber = 1
			this.initIndex = 0
			this.pageHasNoMore = false
			this.canLoad = false 
			this.pageItems = []
			if(await this.isLogin ||  await this.statusBar>0){
				await this.loadPageData()
				await this.getUser()
				// await this.loadAndMakePosters()
				await this.getWapInviterPoster()
			}else{
				uni.navigateTo({
					url: '/packs/pages/auth/auth'
				})
			}
			
		},
		async onReady(){
			// await this.loadBonusSamples()
			// await this.bonusCheckingBeforeTaking()
		},
		async onReachBottom() {
			if(this.canLoad){
				if (this.pageHasNoMore) return
				this.pageNumber += 1
				await this.loadPageData()
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 550) {
				this.backTopShow = true
			} else {
				this.backTopShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "/colorui/main.css";
	@import "/colorui/icon.css";
	page {
		background: #FFDBBB;
	}
	.callFriend{
		position: relative;
	}

	.top-view {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
	}

	.status {
		height: 20px;
		width: 100%;
	}

	.title {
		width: 100%;
		position: fixed;
		top: 20px;
		background: rgba(0, 0, 0, 0);
		z-index: 99;
		display: flex;
		align-items: center;
	}

	.back-box {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0rpx 0 0 10rpx;

		>image {
			display: block;
			width: 40rpx;
			height: 40rpx;
		}
	}
	.title-text{
		width: 200rpx;
		display: flex;
		justify-content: center;
		font-size:30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		// color:#FFFFFF;
		line-height: 36rpx;
		position: absolute;
		left:50%;
		top:28rpx;
		margin-left: -100rpx;
	}
	.status-relative-fixed{
		width: 100%;
		position: fixed;
		left:0;
		background:rgba(0,0,0,0);
	}
	.hasBg{
		background: #FFDBBB;
	}

	.call-friend-banner {
		position: relative;
		height: 972rpx;
	}
	.broadcast{
		width:530rpx;
		height:50rpx;
		background:rgba(0,0,0,.1);
		border-radius: 34rpx;
		position: absolute;
		left:50%;
		margin-left: -265rpx;
		bottom:580rpx;
	}
	.swiper{
		height:50rpx;
	}
	.swiper-item{
		height:50rpx;
		display:flex;
		align-items: center;
		>view{
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			width:426rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
		.broadcasticon{
			display: block;
			width:40rpx;
			height:40rpx;
			margin:0 16rpx 0 4rpx;
			border-radius: 50%;
		}
	}
	

	.calledFriendbanner {
		// width: 750rpx;
		width: 100%;
		height: 972rpx;
	}
	.activity-details-btn{
		width:600rpx;
		height:130rpx;
		background: rgba(0,0,0,0);
		position: absolute;
		right:50rpx;
		top:440rpx;
		z-index: 10;
	}

	.calledbtn {
		display: block;
		width: 160rpx;
		height: 160rpx;
		position: absolute;
		bottom: 138rpx;
		left: 294rpx;
		animation-name: zoom;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

	@keyframes zoom {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	.rankingListbg {
		display: block;
		// width: 750rpx;
		width: 100%;
		height: 76rpx;
	}

	.my-ranking {
		width: 670rpx;
		height: 220rpx;
		background: #FFF4E4;
		border-radius: 32rpx;
		margin: 0 auto;
	}

	.my-ranking-title {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 20rpx;

		>image {
			display: block;
			width: 46rpx;
			height: 8rpx;
		}

		>view {
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			margin: 0 14rpx;
		}
	}

	.my-ranking-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.my-ranking-info-left {
		display: flex;
		align-items: center;
	}

	.user-img {
		display: block;
		width: 80rpx;
		height: 80rpx;
		margin: 0 16rpx 0 14rpx;
		border-radius: 50%;
	}

	.my-ranking-info-num {
		width: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		margin-left: 20rpx;
		.no-rank{
			>view{
				font-size:26rpx;
				line-height: 32rpx;
				font-weight: 400;
				color: #666666;
				margin-left: 20rpx;
			}
		}
	}

	.my-ranking-user-info {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.my-ranking-info-right {
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		margin-right: 32rpx;
	}

	.rank-list {
		padding-bottom: 100rpx;
	}

	.rank-list-tab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 670rpx;
		margin: 32rpx auto 0;
		position: relative;
		>view {
			width:50%;
			position: relative;
			z-index: 1;
			>image {
				display: block;
				width: 100%;
				height: 82rpx;
			}
		}
		.tabbg{
			width: 100%;
			height: 70rpx;
			background: #FFF0E3;
			position: absolute;
			left:0;
			bottom: 0;
			z-index:0;
			border-radius: 32rpx;
		}
		// >view:nth-child(2){
		// 	margin-left: -2rpx;
			
		// }
	}

	.tabTitle {
		position: absolute;
		width:100%;
		// left: 80rpx;
		left: 0;
		top: 26rpx;
		text-align: center;
	}
	.active{
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
	}
	.active-line{
		width: 52rpx;
		height: 4rpx;
		background: #EB4800;
		border-radius: 2rpx;
		position: absolute;
		left:142rpx;
		bottom: 0;
	}

	.rank-list-content {
		width: 670rpx;
		min-height: 200rpx;
		margin: 0 auto;
		background: #FFFFFF;
		padding: 50rpx 0;
		border-radius: 0 0 16rpx 16rpx;
	}

	.rank-list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 146rpx;
	}

	.rank-list-item-num {
		width: 48rpx;
		height: 56rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 32rpx;

		>view {
			font-size: 32rpx;
			font-weight: bold;
			color: #666666;
		}
	}

	.rank-icon {
		display: block;
		width: 48rpx;
		height: 56rpx;

	}

	.rank-list-item-left {
		display: flex;
		align-items: center;
	}

	.rank-list-user-img {
		display: block;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin: 0 16rpx 0 32rpx;
	}

	.rank-list-item-user {
		// >view:nth-child(1) {
		// 	font-size: 32rpx;
		// 	font-family: PingFangSC-Semibold, PingFang SC;
		// 	font-weight: 600;
		// 	color: #333333;
		// 	line-height: 44rpx;
		// }
		display: flex;
		>.rank-list-item-user-name {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			width:150rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			word-break: break-all;
		}
		>.rank-list-item-user-name1{
			width:320rpx;
		}
	}

	.rank-list-item-money {
		font-size: 40rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FF5F4D;
		margin-right: 32rpx;
		margin-right:20rpx;
	}

	.rank-list-item-money-normal {
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
	}

	.no-more {
		width: 100%;
		font-size: 24rpx;
		text-align: center;
		color: #cccccc;
	}

	.promote {
		margin-top: 280rpx;
		.popup {
			background: white;
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
			.share {
				display: flex;
				justify-content: space-around;
				padding:40rpx 40rpx 40rpx 40rpx;
				.wechat {
					border: none;
					.pic {
						width: 112rpx;
						height: 112rpx;
					}
					.share-text {
						.large {
							font-size: 30rpx;
							line-height: 30rpx;
							margin-bottom: 10rpx;
						}
						.small {
							font-size: 24rpx;
							line-height: 24rpx;
							color: #999999;
						}
					}
				}
				.img {
					border: none;
					.pic {
						width: 112rpx;
						height: 112rpx;
					}
					.share-text {
						.large {
							font-size: 30rpx;
							line-height: 30rpx;
							margin-bottom: 10rpx;
						}
						.small {
							font-size: 24rpx;
							line-height: 24rpx;
							color: #999999;
						}
					}
				}
			}
			.cancel {
				padding: 30rpx 30rpx 60rpx 30rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
			}
		}
		.posters {
			// height: 1000rpx;
			width:750rpx;
			.vip-rotation{
				.image {
					display: block;
					// width: 556rpx;
					// height: 988rpx;
					width: 600rpx;
					// height:950rpx;
					margin: 0 auto;
					border-radius: 20rpx;
				}
			}
			
			.save {
				width: 484rpx;
				height: 80rpx;
				color: white;
				margin: 20rpx auto;
				text-align: center;
				line-height: 80rpx;
				background: linear-gradient(90deg, #FFA879 0%, #FF5F4D 100%);
				border-radius: 50rpx;
			}
		}
		.button {
			width: 160rpx;
			height: 160rpx;
			border: none;
			background-size: 160rpx 160rpx;
			background-repeat: no-repeat;
			background-image: url("https://littleshop.oss-cn-beijing.aliyuncs.com/images/mini/recruit/promote.png");
		}
	}
	.tips{
		position: absolute;
		left:0;
		bottom:20rpx;
		width: 100%;
		height: 40rpx;
		font-size: 20rpx;
		color: #999999;
		text-align: center;
	}
	.backTop{
		width: 96rpx;
		height: 96rpx;
		position: fixed;
		right:30rpx;
		bottom:200rpx;
		z-index: 99;
		>image{
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	
	.popbgmsg-box{
		width: 600rpx;
		height:898rpx;
		// height: 1070rpx;
		margin-top: 50rpx;
		position: relative;
		background: #FFDBBB;
		border-radius: 10rpx;
		border: 1rpx solid #FFDBBB;
	}
	
	.activitypopbg{
		display: block;
		width: 100%;
		height:898rpx;
		position: absolute;
		z-index: 0;
		border-radius: 10rpx;
	}
	
	.pop-content{
		width: 520rpx;
		height: 600rpx;
		// overflow-y: auto;
		background: #FFFFFF;
		position: relative;
		z-index: 1;
		margin:146rpx 0 0 40rpx;
		border-radius: 16rpx;
		padding-top: 10rpx;
		padding-bottom: 15rpx;
	}
	.pop-content-item-title{
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
		line-height:30rpx;
		margin:24rpx 0 16rpx 24rpx;
	}
	.pop-content-item-content{
		width: 470rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
		margin:0rpx 0 0rpx 24rpx;
		display: flex;
		overflow: hidden;
	}
	.pop-content-item-content1{
		margin: 10rpx 0 14rpx 24rpx;
	}
	.rank-lable{
		height: 44rpx;
	}
	
	.conformbtn{
		display: block;
		width: 520rpx;
		height: 80rpx;
		margin:25rpx auto;
	}
	
	
	// 自定义轮播样式修改
	.card-swiper{
		height:988rpx!important;
	}
	
	.card-swiper uni-swiper-item{
		width: 556rpx!important;
		padding:0!important;
		left:40rpx;	
		left:100rpx;	
	}
	
	.card-swiper uni-swiper-item .swiper-item{
		transform:scaleX(0.9) scaleY(0.85);
	}
	.card-swiper uni-swiper-item .swiper-item .poster-img{
		display: block;
		width: 100%;
		height: 100%;
	}
	
	
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}
	
	.badge-lable{
		display: flex;
		// min-width: 84rpx;
		height: 30rpx;
		background-size: 100% 45rpx;
		position: relative;
		>image{
			display: block;
			height: 30rpx;
			margin-right: 8rpx;
		}
	}
	.badge-icon{
		display: block;
		height: 40rpx;
		margin-right: 8rpx;
	}
	
	
</style>
